var container = document.getElementById('container');
var personal = document.getElementById('personal');
var details = document.getElementById('details');
var orders = document.getElementById('orders');




var data = {
	"member_no": 1,
	"username": "9494",
	"level": 4,
	"point": 57568,
	"skm": 12680,
	"gender": "男",
	"age": 22,
	"password": "abcdefg",
	"orders": [
		{
			"order_no":20051100001,
			"order_date": "2020-05-11",
			"flight":"GS7898",
			"start":"江北国际机场T3",
			"end":"天津滨海国际机场T2",
			"passenger":"张三",
			"flight_date":"2020-05-13 13:15",
			"price":375.00,
			"discount":0.2723
		},
		{
			"order_no":20052000031,
			"order_date": "2020-05-20",
			"flight":"GS7897",
			"start":"天津滨海国际机场T2",
			"end":"江北国际机场T3",
			"passenger":"张三",
			"flight_date":"2020-05-22 09:15",
			"price":295.00,
			"discount":0.2022
		}
	]
	
}

var member_no = data.member_no;
var username = data.username;
var level = data.level;
var point = data.point;
var skm = data.skm;
var gender = data.gender;
var age = data.age;
var password = data.password;
var order = data.orders;


var viewData = "<div class='label'>会员卡号："+member_no+"</div><div class='label'>用户名："+username+"</div><div class='label'>会员等级："+level+"</div><div class='label'>积分："+point+"</div><div class='label'>累计里程："+skm+"km</div>";
container.innerHTML = viewData;


personal.addEventListener("click", function(){
	this.style.color = "#00ffff";
	details.style.color = "#FFFFFF";
	orders.style.color = "#FFFFFF";
	
	
	viewData = "<div class='label'>会员卡号："+member_no+"</div><div class='label'>用户名："+username+"</div><div class='label'>会员等级："+level+"</div><div class='label'>积分："+point+"</div><div class='label'>累计里程："+skm+"km</div>";
	container.innerHTML = viewData;

	
});

details.addEventListener("click", function(){
	this.style.color = "#00ffff";
	personal.style.color = "#FFFFFF";
	orders.style.color = "#FFFFFF";
	
	var selector = "";
	if(gender == "男"){
		selector = "<select><option value='0'></option><option value='1' selected='selected'>男</option><option value='2'>女</option></select>";
	}
	else if(gender == "女") {
		selector = "<select><option value='0'></option><option value='1'>男</option><option value='2' selected='selected'>女</option></select>";
	}
	else {
		selector = "<select><option value='0'></option><option value='1'>男</option><option value='2'>女</option></select>";
	}
	
	
	viewData = "<div><span class='label'>性别</span><span>"+selector+"</span></div><div><span class='label'>年龄</span><span><input type='number' id='age_input' step=1></input></span></div><div><span class='label'>密码</span><span><input type='text' id='password_input'></input></span></div><div><button id='save'>保存设置</button><div>";
	container.innerHTML = viewData;
	
	var age_input = document.getElementById('age_input');
	age_input.value = age;
	var password_input= document.getElementById('password_input');
	password_input.value = password;
	var save = document.getElementById('save');
	
	save.addEventListener("click", function(){
		var option = selector.selectedIndex;
		if (option == 0) {
			data.gender = "";
		}
		else if (option == 1) {
			data.gender = "男";
		}
		else {
			data.gender = "女";
		}
		gender = data.gender;
		data.age = age_input.value;
		age = data.age;
		data.password = password_input.value;
		password = data.password;
		
		alert("保存成功");
		
	});
});

orders.addEventListener("click", function(){
	this.style.color = "#00ffff";
	details.style.color = "#FFFFFF";
	personal.style.color = "#FFFFFF";
	
	viewData = "";
	
	for (var i in order) {
		
		var fixed_discount = (order[i].discount*10).toFixed(1);
		
		viewData += "<div class='order_list'><div class='title'><span class='list_label'>订单号：</span><span class='list_data'>"+order[i].order_no
		+"</span><span class='list_label'>预订日期：</span><span class='list_data'>"+order[i].order_date+
		"</span><span class='delete'>删除订单</span></div><div class='detail'><span class='info'><div class='column'><span class='list_label'>航班号：</span><span class='list_data'>"+order[i].flight+
		"</span></div><div class='column'><span class='list_label'>"+order[i].start+" => "+order[i].end+
		"</span></div><div class='column'><span class='list_label'>乘机人：</span><span class='list_data'>"+order[i].passenger+
		"</span></div><div class='colum'><span class='list_label'>乘机时间：</span><span class='list_data'>"+order[i].flight_date+
		"</span></div></span><span class='price_info'><span class='price'>￥"+order[i].price+"</span><span class='discount'>"+fixed_discount+"折</span></span></div></div>";

	}	
	
	container.innerHTML = viewData;
	for(var i=0; i<order.length;i++) {
		var deleter = document.getElementsByClassName('delete')[i];
		var list = document.getElementsByClassName('order_list')[i];
		deleter.value = order[i].order_no;
		list.id = order[i].order_no;
		
		deleter.addEventListener("click", function(){
			
			var response = this.value;
			var toDelete = document.getElementById(response);
			toDelete.parentNode.removeChild(toDelete);//在视窗中删除对应列表
			
			//在数据库中删除
			for(var i in data.orders) {
				if (data.orders[i].order_no == response) {
					data.orders.splice(i, 1)
				}
			}
			order = data.orders;
			
			alert("订单已删除");
		});
	}
	
	
	
	
});

